<div class="dashboard-container">
  <div class="flex align-items-center justify-content-between mb-4">
    <h1>Dashboard</h1>
  </div>
  
  <!-- Support Section -->
  <div class="mb-4" *ngIf="showSupportSection()">
    <app-support-section></app-support-section>
  </div>

  <!-- Manual Events Card (Action Required) -->
  <div class="mb-4" *ngIf="currentManualEvent()">
    <div class="glow-event-card-wrapper" [ngClass]="getManualEventSeverityClass(currentManualEvent()!.severity)">
      <p-card styleClass="dashboard-card">
        <ng-template pTemplate="header">
          <div class="flex align-items-center justify-content-between p-3 border-bottom-1 surface-border">
            <div class="header-title-container">
              <div class="flex align-items-center gap-2">
                <i class="pi pi-exclamation-triangle text-2xl"></i>
                <h2 class="card-title m-0">Action Required</h2>
              </div>
              <span class="card-subtitle">Manual intervention needed</span>
            </div>
            <div class="flex align-items-center gap-2">
              <p-tag
                [severity]="getEventSeverity(currentManualEvent()!.severity)"
                [value]="currentManualEvent()!.severity"
              ></p-tag>
            </div>
          </div>
        </ng-template>

        <div class="card-content">
          <!-- Event Message -->
          <div class="event-message mb-3">
            <h3 class="text-xl font-semibold mb-2" [innerHTML]="processManualEventMessage(currentManualEvent()!.message)"></h3>
            <p class="text-sm text-color-secondary">
              {{ currentManualEvent()!.timestamp | date: 'yyyy-MM-dd HH:mm:ss' }}
            </p>
          </div>

          <!-- Event Data (Collapsible) -->
          <div class="event-data mb-3" *ngIf="currentManualEvent()!.data">
            <p-accordion [multiple]="false">
              <p-accordion-panel [value]="0">
                <p-accordion-header>
                  <ng-template #toggleicon let-active="active">
                    @if (active) {
                      <i class="pi pi-chevron-up"></i>
                    } @else {
                      <i class="pi pi-chevron-down"></i>
                    }
                  </ng-template>
                  Event Details
                </p-accordion-header>
                <p-accordion-content>
                  <div class="event-data-content">
                    <pre class="text-sm">{{ parseEventData(currentManualEvent()!.data) | json }}</pre>
                  </div>
                </p-accordion-content>
              </p-accordion-panel>
            </p-accordion>
          </div>

          <!-- Navigation and Action Controls -->
          <div class="glow-card-footer">
            <div class="flex align-items-center justify-content-between gap-3">
              <!-- Navigation -->
              <div class="flex align-items-center gap-2">
                <button
                  pButton
                  icon="pi pi-chevron-left"
                  class="p-button-outlined p-button-sm"
                  (click)="previousManualEvent()"
                  [disabled]="!canNavigatePrevious()"
                  pTooltip="Previous event"
                  tooltipPosition="top"
                ></button>
                <span class="text-sm font-medium">
                  {{ currentManualEventIndex() + 1 }} of {{ unresolvedManualEvents().length }}
                </span>
                <button
                  pButton
                  icon="pi pi-chevron-right"
                  class="p-button-outlined p-button-sm"
                  (click)="nextManualEvent()"
                  [disabled]="!canNavigateNext()"
                  pTooltip="Next event"
                  tooltipPosition="top"
                ></button>
              </div>

              <!-- Dismiss Button -->
              <button
                pButton
                label="Dismiss"
                icon="pi pi-check"
                class="p-button-success"
                (click)="dismissManualEvent(currentManualEvent()!.id)"
              ></button>
            </div>
          </div>
        </div>
      </p-card>
    </div>
  </div>

  <!-- Real-time Cards -->
  <div class="grid">
    <!-- Recent Logs Card -->
    <div class="col-12 lg:col-6">
      <p-card styleClass="dashboard-card h-full">
        <ng-template pTemplate="header">
          <div class="flex align-items-center justify-content-between p-3 border-bottom-1 surface-border">
            <div class="header-title-container">
              <h2 class="card-title m-0">Recent Logs</h2>
              <p-tag
                [severity]="connected() ? 'success' : 'danger'"
                [value]="connected() ? 'Connected' : 'Disconnected'"
                [pTooltip]="connected() ? 'Connected to app hub' : 'Attempting to reconnect...'"
                tooltipPosition="right"
                styleClass="status-tag"
              ></p-tag>
              <span class="card-subtitle">Live log stream</span>
            </div>
            <div class="flex align-items-center gap-2">
              <i class="pi pi-list text-xl"></i>
            </div>
          </div>
        </ng-template>
        
        <div class="card-content">
          <!-- Scrollable Logs View -->
          <div class="viewer-console">
            <div class="timeline-container" *ngIf="displayLogs().length > 0; else noLogsTemplate">
              <div class="timeline-item" *ngFor="let log of displayLogs(); let i = index">
                <div class="timeline-marker">
                  <span class="timeline-icon" [ngClass]="getLogIconClass(log.level)">
                    <i [class]="getLogIcon(log.level)"></i>
                  </span>
                </div>
                <div class="timeline-content">
                  <div class="flex align-items-start justify-content-between mb-1">
                    <div class="flex align-items-center gap-2">
                      <p-tag [severity]="getLogSeverity(log.level)" [value]="log.level"></p-tag>
                      <span class="text-xs text-color-secondary" *ngIf="log.category">{{log.category}}</span>
                    </div>
                    <span class="text-xs text-color-secondary">{{ log.timestamp | date: 'yyyy-MM-dd HH:mm:ss' }}</span>
                  </div>
                  <div class="timeline-message" 
                       [pTooltip]="log.message" 
                       tooltipPosition="top"
                       [showDelay]="500">
                    {{truncateMessage(log.message)}}
                  </div>
                  <div class="text-xs text-color-secondary mt-1" *ngIf="log.jobName">
                    Job: {{log.jobName}}
                  </div>
                </div>
              </div>
            </div>
            
            <ng-template #noLogsTemplate>
              <div class="empty-state text-center py-4">
                <i class="pi pi-list text-4xl text-color-secondary mb-3"></i>
                <p class="text-color-secondary">No recent logs available</p>
                <p-progressSpinner *ngIf="!connected()" styleClass="w-2rem h-2rem"></p-progressSpinner>
              </div>
            </ng-template>
          </div>
          
          <div class="card-footer mt-3">
            <button pButton label="View All Logs" icon="pi pi-arrow-right" routerLink="/logs" iconPos="right" class="p-button-outlined"></button>
          </div>
        </div>
      </p-card>
    </div>
    
    <!-- Recent Events Card -->
    <div class="col-12 lg:col-6 events-card">
      <p-card styleClass="dashboard-card h-full">
        <ng-template pTemplate="header">
          <div class="flex align-items-center justify-content-between p-3 border-bottom-1 surface-border">
            <div class="header-title-container">
              <h2 class="card-title m-0">Recent Events</h2>
              <p-tag
                [severity]="connected() ? 'success' : 'danger'"
                [value]="connected() ? 'Connected' : 'Disconnected'"
                [pTooltip]="connected() ? 'Connected to app hub' : 'Attempting to reconnect...'"
                tooltipPosition="right"
                styleClass="status-tag"
              ></p-tag>
              <span class="card-subtitle">Live event stream</span>
            </div>
            <div class="flex align-items-center gap-2">
              <i class="pi pi-calendar text-xl"></i>
            </div>
          </div>
        </ng-template>
        
        <div class="card-content">
          <!-- Scrollable Events View -->
          <div class="viewer-console">
            <div class="timeline-container" *ngIf="displayEvents().length > 0; else noEventsTemplate">
              <div class="timeline-item" *ngFor="let event of displayEvents(); let i = index">
                <div class="timeline-marker">
                  <span class="timeline-icon" [ngClass]="getEventIconClass(event.eventType, event.severity)">
                    <i [class]="getEventIcon(event.eventType)"></i>
                  </span>
                </div>
                <div class="timeline-content">
                  <div class="flex align-items-start justify-content-between mb-1">
                    <div class="flex align-items-center gap-2">
                      <p-tag [severity]="getEventSeverity(event.severity)" [value]="event.severity"></p-tag>
                      <span class="text-xs text-color-secondary">{{formatEventType(event.eventType)}}</span>
                    </div>
                    <span class="text-xs text-color-secondary">{{event.timestamp | date: 'yyyy-MM-dd HH:mm:ss'}}</span>
                  </div>
                  <div class="timeline-message" 
                       [pTooltip]="event.message" 
                       tooltipPosition="top"
                       [showDelay]="500">
                    {{truncateMessage(event.message)}}
                  </div>
                  <div class="text-xs text-color-secondary mt-1" *ngIf="event.trackingId">
                    Tracking: {{event.trackingId}}
                  </div>
                </div>
              </div>
            </div>
            
            <ng-template #noEventsTemplate>
              <div class="empty-state text-center py-4">
                <i class="pi pi-calendar text-4xl text-color-secondary mb-3"></i>
                <p class="text-color-secondary">No recent events available</p>
                <p-progressSpinner *ngIf="!connected()" styleClass="w-2rem h-2rem"></p-progressSpinner>
              </div>
            </ng-template>
          </div>
          
          <div class="card-footer mt-3">
            <button pButton label="View All Events" icon="pi pi-arrow-right" routerLink="/events" iconPos="right" class="p-button-outlined"></button>
          </div>
        </div>
      </p-card>
    </div>

    <!-- Jobs Management Card -->
    <div class="col-12">
      <app-jobs-management></app-jobs-management>
    </div>
  </div>
</div>
